<template>
  <div class="pa-5 bg-white">
    <el-page-header @back="back">
      <template slot="title">
        <span class="back">返回</span>
      </template>
      <template slot="content">
        <span class="back pr-4">授权管理</span>
      </template>
    </el-page-header>
    <avue-form ref="form" v-model="form" :option="option">
      <template slot="table">
        <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
          <avue-crud
            ref="crud"
            v-model="form"
            :data="tableData"
            :table-loading="tableLoading"
            :option="tableOption"
            :search.sync="searchForm"
            :clear-on-open="true"
            :page.sync="page"
            @on-load="loadListData"
            @search-change="onSearchChange"
            @search-reset="onCustomSearchReset"
            @refresh-change="onRefresh"
            @selection-change="onSelectionChange"
            @filter-change="onFilterChange"
            @sort-change="onSortChange"
          >
            <template slot="menuLeft">
              <el-button type="primary" size="small" @click="onOpen">添加</el-button>
              <el-button size="small" :disabled="!selectionData.length" @click="batchDelete()">取消授权</el-button>
            </template>
            <template slot="menu" slot-scope="{ row }">
              <el-button type="text" size="small" @click="onDelete(row)">取消授权</el-button>
            </template>
          </avue-crud>
          <UserSelecter ref="userSelecter" :clear-on-open="true" @changeOrginData="onChange"></UserSelecter>
        </de-container>
      </template>
      <!-- <template slot="date">
        <el-date-picker :value="[form.beginTargetPeriod, form.endTargetPeriod]" align="left" type="daterange" disabled>
        </el-date-picker>
      </template> -->
    </avue-form>
  </div>
</template>
<script>
import { targetAuthPage, targetAuthSave } from '@/api/target/target'
import {
  requestCheckJtxMatrix,
  requestSaveOrUpdateJtxMatrix,
  requestDelJtxMatrix,
  requestTargetDetail,
} from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import UserSelecter from '@/components/userSelecter'
import moment from 'moment'
const DEFAULT_LIST_MAP_FUNC = (item) => {
  const ret = item

  return ret
}
const DEFAULT_EDIT_MAP_FUNC = (item) => {
  const ret = item
  item.switching = false

  return ret
}

export default {
  name: 'MatrixAuthDetail',
  components: { DeContainer, UserSelecter },
  mixins: [ListMixin],
  data() {
    return {
      moment,
      listApi: this.list,
      listMapFunc: DEFAULT_LIST_MAP_FUNC,
      editMapFunc: DEFAULT_EDIT_MAP_FUNC,
      tableOption: {
        menuWidth: 320,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: true,
        index: false,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        labelSuffix: ' ',
        column: [
          {
            label: '用户名称',
            prop: 'userName',
            search: true,
            span: 12,
            align: 'left',
            overHidden: true,
          },
          // {
          //   label: '用户角色',
          //   search: true,
          //   prop: 'userId',
          //   align: 'left',
          //   span: 12,
          // },
          {
            label: '手机号',
            prop: 'phone',
            span: 12,
            align: 'left',
            overHidden: true,
            type: '',
          },
          {
            label: '部门',
            prop: 'deptName',
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '部门',
            prop: 'deptId',
            type: 'tree',
            props: {
              label: 'name',
              value: 'name',
            },
            dicUrl: '/api/dept/tree',
            dicMethod: 'post',
            dicQuery: {},
            search: true,
            addDisabled: false,
            span: 12,
            align: 'left',
            overHidden: true,
            hide: true,
          },
        ],
      },
      selectionData: [],
      option: {
        detail: false,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: 'left',
        menuLeft: false,
        labelSuffix: ' ',
        group: [
          {
            label: '目标基础信息',
            arrow: true,
            prop: 'mbdy',
            column: [
              {
                label: '指标名称',
                prop: 'name',
                span: 12,
                disabled: true,
              },
              {
                label: '指标编码',
                prop: 'code',
                span: 12,
                disabled: true,
              },
              {
                label: '指标分类',
                prop: 'indexType',
                span: 12,
                disabled: true,
              },
              {
                label: '发布时间',
                prop: 'publishTime',
                span: 12,
                disabled: true,
              },
              {
                label: '责任部门',
                prop: 'position',
                type: 'tree',
                props: {
                  label: 'name',
                  value: 'deptId',
                },
                dicUrl: '/api/dept/tree',
                dicMethod: 'post',
                dicQuery: {},
                addDisabled: false,
                span: 12,
                align: 'left',
                overHidden: true,
                disabled: true,
              },
              {
                label: '责任人',
                prop: 'director',
                type: 'select',
                span: 12,
                dicUrl: '/api/user/userGrid/1/999',
                props: {
                  label: 'nickName',
                  value: 'userId',
                },
                dicMethod: 'post',
                dicFormatter: (res) => res.listObject,
                disabled: true,
              },
              {
                label: '指标定义',
                prop: 'indexDefine',
                type: 'textarea',
                span: 24,
                disabled: true,
              },
            ],
          },
          {
            label: '授权用户',
            arrow: true,
            prop: 'mbzt',
            column: [
              {
                prop: 'table',
                labelWidth: 0,
                span: 24,
              },
            ],
          },
        ],
      },
      form: {},
      userList: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    async list(params) {
      params['matrixId'] = this.$route.params.id
      let res = await requestCheckJtxMatrix(params)
      // res.data = { listObject: res.data || [] }
      return res
    },
    batchDelete(row) {
      this.$confirm('确定删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        console.log(this.selectionData)
        let params = []
        if (row) {
          params = [row.id]
        } else {
          params = this.selectionData.map((item) => item.id)
        }
        console.log(params)
        requestDelJtxMatrix(params).then((res) => {
          console.log(res)
          if (res.success) {
            this.$message.success('取消授权成功')
            this.onSearchReset()
          }
        })
      })
    },
    onDelete(row) {
      this.batchDelete(row)
    },
    onOpen() {
      this.$refs.userSelecter.open()
    },
    onChange(data) {
      this.userList = data.map((item) => item.id)
      let params = data.map((item) => {
        return {
          deptId: item.deptId,
          deptName: item.dept?.deptName || '',
          matrixId: this.$route.params.id,
          phone: item.phone,
          userId: item.userId,
          userName: item.nickName,
        }
      })
      requestSaveOrUpdateJtxMatrix(params).then((res) => {
        this.$message.success('授权成功')
        this.onSearchReset()
      })
    },
    onSelectionChange(rows) {
      this.selectionData = rows
    },
    back() {
      this.$router.back()
    },
    async init() {
      requestTargetDetail({ id: this.$route.params.id }).then((res) => {
        console.log(res, 9999)
        this.form = { ...this.form, ...res.data }
      })
      // getDetail({ id: this.$route.params.id }).then((res) => {
      //   let data = res.data
      //   this.form = data
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding-top: 10px;
    margin-bottom: 10px;
  }

  .el-drawer .avue-form {
    padding-top: 0;
  }
}

.status-tag {
  width: 83px;
  height: 24px;
  line-height: 22px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}
</style>
